<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="__Admin__/css/style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="__Admin__/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="__ED__/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__ED__/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="__ED__/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="__Admin__/validate/jquery.validate.min.js"></script>

    <link rel="stylesheet" href="__Admin__/timebox/calendar.css" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="__Admin__/timebox/calendar.js"></script>
    <style>
        .textinput2{
            width: 800px;
            height: 320px;
            border: none;
        }
        .formtitle span.current{
            border-bottom: solid 3px #66c9f3;
        }
        .formtitle span{
            position: static;
            margin-right: 4px;
            border: none;
            cursor: pointer;
        }
        .forminfo:first-child{
            display: block;
        }
        .forminfo{
            display: none;
        }
        .calendar .nav{
            display: none;
        }
        .forminfo .add,
        .forminfo .div{
            font-size: 16px;
            margin-right: 10px;
            cursor: pointer;
        }

    </style>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">首页</a></li>
            <li><a href="#">表单</a></li>
        </ul>
    </div>
    <div class="formbody">
        <div class="formtitle">
            <span class="current">基本信息</span>
            <span>商品介绍</span>
            <span>商品属性</span>
        </div>
        <form action="{:U('add')}" method="post" id="regform" enctype="multipart/form-data">
            <ul class="forminfo">
                <li>
                    <label>商品名称</label>
                    <input name="goods_name" placeholder="请输入商品名称" type="text" class="dfinput" /><i>名称不能超过30个字符</i></li>
                <li>
                    <label>商品价格</label>
                    <input name="goods_price" placeholder="请输入商品价格" type="text" class="dfinput" /><i></i></li>
                <li>
                    <label>商品数量</label>
                    <input name="goods_number" placeholder="请输入商品数量" type="text" class="dfinput" />
                </li>
                <li>
                    <label>商品重量</label>
                    <input name="goods_weight" placeholder="请输入商品重量" type="text" class="dfinput" />
                </li>

                <li>
                    <label>是否上架</label>
                    <cite>
                        <input name="is_show" type="radio" value="1" checked="checked" />上架&nbsp;&nbsp;&nbsp;&nbsp;
                        <input name="is_show" type="radio" value="0" />下架
                    </cite>
                </li>
                <li>
                    <label>图片上传</label>
                    <input name="goods_big_logo" type="file"/>
                </li>
                <li>
                    <label>添加时间</label>
                    <input name="created_time" id="created_time"  type="datetime" class="dfinput" />
                </li>
            </ul>
            <ul class="forminfo">
                <li>
                    <label>商品描述</label>
                    <textarea name="goods_introduce" id="goods_introduce" placeholder="请输入商品描述" cols="" rows="" class="textinput textinput2"></textarea>
                </li>
            </ul>
            <ul class="forminfo goods_attr">
                <li>
                    <label>商品类型</label>
                    <select name="type_id" id="" class="dfinput">
                        <option value="0">请选择商品类型</option>
                        <volist name="list" id="vo">
                            <option value="{$vo.type_id}">{$vo.type_name}</option>
                        </volist>
                    </select>
                </li>
            </ul>
            <ul>
                <li>
                    <label>&nbsp;</label>
                    <input name="" id="btnSubmit" type="submit" class="btn" value="确认保存" />
                </li>
            </ul>
        </form>
    </div>
</body>
<script>
    // 栏目验证
    /*$('#regform').validate({
        rules: {
            goods_name: {required:true},
            goods_price: {required:true},
            goods_number: {required:true},
            goods_weight: {required:true},
            goods_introduce: {
                required: true,
                minlength: 2
            },
        },
        messages: {
            goods_name: "*必填",
            goods_price: "*必填",
            goods_number: "*必填",
            goods_weight: "*必填",
            goods_introduce: {
                required: "*必填",
                minlength: "至少2个字符"
            },
        },
    });*/

    // 绑定点击样式
    $('.formtitle span').click(function () {
        // 当前被点击span获取样式其它兄弟隐藏样式
        $(this).addClass('current').siblings().removeClass('current');
        // 让当前被点击的ul显示，然后让其它ul隐藏
        $('.forminfo').eq( $(this).index() ).show().siblings('.forminfo').hide();
    });

    // 实例化富文本编辑器
    var ue = UE.getEditor('goods_introduce', {
        initialFrameWidth:800  //初始化编辑器宽度,默认1000
        ,initialFrameHeight:200  //初始化编辑器高度,默认320
        //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
        , toolbars: [[
                    'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough',
                    'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote',
                    'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist',
                    'selectall', 'cleardoc', '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|','directionalityltr',
                    'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyjustify', '|', 'touppercase','tolowercase', '|','link', 'unlink', '|',
                    'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','horizontal', 'date', 'time',
                    'spechars','preview'
        ]]
    });

    // 时间选择器
    Calendar.setup({
        inputField     :    "created_time",
        ifFormat       :    "%Y-%m-%d %H:%M:%S",
        showsTime      :    true,
        timeFormat     :    "12"
    });

    // 使用ajax获取后台对应的商品类型属性
    $('select[name = type_id]').change(function () {
        var cur = $(this).val();
        if (cur == '0') {
            return false; // 阻止事件继续执行
        }
        $('.newItem').remove();
        var _this = $(this);
        // 使用get请求获取所有商品属性数据
        $.get('{:U("Goods/getAttr")}', {'type_id':cur}, function(msg) {
            //console.log(msg);
            var html = '';
            $(msg).each(function (key, value) {
                if (value.attr_sel == 0) {
                    // console.log('唯一属性,文本框');
                    html +='<li class="newItem">';
                    html +='<label>'+ value.attr_name +'</label>';
                    html +='<input name="attr_ids[]" type="hidden" value="'+ value.attr_id +'" />';
                    html +='<input name="attr_value[]" placeholder="'+ value.attr_name
                         +'" type="text" class="dfinput" /><i></i></li>';
                }else {
                    // console.log('单选,下拉列表框');
                    var vals = value.attr_vals.split(',');
                    console.log(vals);
                    html +='<li class="newItem">';
                    html +='<input name="attr_ids[]" type="hidden" value="'+ value.attr_id +'" />';
                    html +='<label><span class="add">[ + ]</span>'+ value.attr_name +'</label>';
                    html +='<select name="attr_value[]" class="dfinput">';
                    for ( var i = 0; i< vals.length; i++ ){
                        html +='<option value="' + vals[i] + '">'+ vals[i] +'</option>';
                    }
                    html +='</select>';
                    html +='</li>';
                }
            });
            _this.parent().after(html);
        }, 'json');
    });

    // 使用jQ动态增加商品类型属性
    $('.goods_attr').on('click', '.add', function () {
        var newLi = $(this).parents('.newItem')
                           .clone().find('span')
                           .html('[ - ]')
                           .removeClass('add').addClass('div')
                           .parents('.newItem');
        $(this).parents('.newItem').after(newLi);
    });
    // 使用jQ动态移除商品类型属性
    $('.goods_attr').on('click', '.div', function () {
        $(this).parents('li').remove();
    });


</script>
</html>
